<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:"hello"
        },
        methods:{},
        beforeCreate() { //生命周期中的第一个函数，该函数在执行时vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作，vue实例中还没有data el methods相关属性
            console.log(this.msg); //undefined
        },
        created() { //生命周期中第二个函数，该函数在执行时vue实例已经初始化了data属性和methods中相关方法
            console.log(this.msg); //hello
        },
        beforeMount() { //生命周期中第三个函数，该函数在执行时Vue将el中指定作用范围作为模板编译，但暂未解析
            console.log(document.querySelector("span").innerText); //{{msg}}
        },
        mounted() { //生命周期中第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新页面
            console.log(document.querySelector("span").innerText); //hello
        },
        beforeUpdate() { //生命周期中第五个函数，该函数是data中数据发生变化时执行 这个事件执行时仅仅是vue实例中data数据变化 页面显示的依然是原始数据
        },
        update() { //生命周期中第六个函数，该函数执行时data中数据发生变化，页面中数据也发生了变化 页面中数据已经和data中数据一致
        },
        beforeDestroy() { //生命周期第七个函数，该函数执行时，vue中所有数据methods component都没销毁
        },
        destroy() { //生命周期的第八个函数，该函数执行时，Vue实例彻底销毁
        }
    });
</script>
</body>
</html>